<!DOCTYPE html>
<!-- Reader -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/reader_findpassword.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        function getQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        var phone = getQueryString("phone");
        function exit(){
            $("#tanchuceng").css("display","none");
            if($("#message").html()=="Your password has been sent to your email!"){
                window.location.href = "/readerlogin?phone=" + phone;
            }
        }
        function findPassword(){
            var email = $("[name=email]").val();
            if(email == null ||email == "")
            {
                $("#message").html("Please input your email!");
                $("#tanchuceng").css("display","block");
            }else{
                $(".con").css("display","block");
                $.ajax({
                    url : "/sendpassword/sendCode",
                    type : "post",
                    data : {
                        "phone":phone,
                        "email":email
                    },
                    success : function (data) {
                        console.log(data);
                        if(data == "no1"){
                            $(".con").css("display","none");
                            $("#message").html("Sorry,please check your phone and email!");
                            $("#tanchuceng").css("display","block");
                        }else if(data == "no2"){
                            $(".con").css("display","none");
                            $("#message").html("The phone doesn't exist!");
                            $("#tanchuceng").css("display","block");
                        } else{
                            $(".con").css("display","none");
                            $("#message").html("Your password has been sent to your email!");
                            $("#tanchuceng").css("display","block");
                        }
                    }
                })

            }
        }
    </script>
</head>
<body>
    <div class="main clearfix">
        <header class="header clearfix">
            <i class="iconfont icon-yun"></i>
            <i>Library</i>
        </header>

        <div class="content">
            <div class="info">
                <div class="pho">
                    Find Your Password By Email
                </div>
            </div>
            <div class="btn">
                <button class="next" onclick="findPassword()">Complete</button>
            </div>
            <div class="email">
                <i> E-mail</i>
                <p>
                    <input placeholder="123456@qq.com" type="text" name="email" >
                </p>
            </div>
        </div>
        <footer class="footer">
            <div class="mandarin">
                <img src="/images/mandarin.png" alt="">
            </div>
            <p>Shan ICP number18018134 | Powered by 1713011</p>
        </footer>
    </div>

    <div id="tanchuceng">
        <div id="msg">
            <div id="exit" onclick="exit()">x</div>
            <p id="message"></p>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="con">
        <div class="loading loading2">
            <div class="wrapper">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </div>
</body>
</html>